<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>pgDrag</title>
	<style>
	.pgDrag-ghost{
		opacity: 0.5;
	}
	</style>
</head>
<body>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>


<!-- Latest Sortable -->
<script src="pgDrag.js"></script>


<!-- Simple List -->
<div id="simpleList1" class="list-group groupsimpleList2" style="min-height:0.1px;text-indent: 4em;">
  <div class="list-group-item">东陵碣石</div>
  <div class="list-group-item">以观沧海</div>
  <div class="list-group-item">水何澹澹</div>
  <div class="list-group-item">山岛竦峙</div>
  <div class="list-group-item">树林丛生</div>
</div>
<ul id="simpleList2" class="list-group groupsimpleList2" style="min-height:0.1px;text-indent: 4em;">
  <li class="list-group-item"><a>百草丰茂</a></li>
  <li class="list-group-item"><a>秋风萧瑟</a></li>
  <li class="list-group-item"><a>洪波涌起</a></li>
  <li class="list-group-item"><a>日出之行</a></li>
  <li class="list-group-item"><a>若出其中</a></li>
</ul>



<script>
	(function () {
		var param = {
			group: 'gogo',
			animation:0,
			draggable: '>a'
		}
		createDrag(".groupsimpleList2", param)
		function createDrag(el, opt){
			if (document.querySelectorAll(el) instanceof NodeList) { // yzy nodeType == 1 表示元素节点
				let nodelist = document.querySelectorAll(el)
				for(var i =0; i< nodelist.length;i++){
					let el = nodelist[i]
					if(!(el && el.nodeType && el.nodeType === 1)){
						throw 'Sortable: `el` must be HTMLElement, and not ' + {}.toString.call(el);
					} else {
						pgDrag.create(el, opt);
					}
				}
			}
    }
    
    console.dir(pgDrag)
	})();
</script>

</body>
</html>
